<ul class="toollist">
	<li><div class="listbox"><i class="iconfont icon-asset-management-the-asset-summary"></i><em>200<p>资产总数</p></em></div></li>
	<li><div class="listbox"><i class="iconfont icon-ERP_huokuanzongjine"></i><em>160W<p>资产金额</p></em></div></li>
	<li><div class="listbox"><i class="iconfont icon-fuquanshenpi_jiaodian"></i><em>198<p>待审批任务</p></em></div></li>
	<li><div class="listbox"><i class="iconfont icon-GIS-TL_weixiudian-"></i><em>10<p>报修资产数</p></em></div></li>
	<li><div class="listbox"><i class="iconfont icon-shijian-tianchong"></i><em>15<p>到期资产</p></em></div></li>
	<li><div class="listbox"><i class="iconfont icon-caigouleixingzhanbi"></i><em>70%<p>资产完好率</p></em></div></li>
</ul>

<ul class="chartlist" style="display: flex;">
	<li>
		<div class="chartbox">
			<div class="boxtitle"><span>仪表盘</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
			<div id="chart1" class="charts"></div>

			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('chart1'));
				// 指定图表的配置项和数据
				var
						option1 = {
							tooltip : {
								formatter: "{a} <br/>{b} : {c}%"
							},
							series: [
								{
									name: '业务指标',
									type: 'gauge',
									"center":["50%","50%"],
									radius:'100%',
									detail: {formatter:'{value}%',textStyle:{fontSize:20}},
									data: [{value: 50}]
								}
							]
						};
				setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
					option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
					myChart.setOption(option1, true);
				}, 2000);
				myChart.setOption(option1);
				window.addEventListener("resize",function(){
					myChart.resize();
				});
			</script>

		</div>
	</li>

	<li>
		<div class="chartbox">
			<div class="boxtitle"><span>数据统计</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
			<div id="chart2" class="charts"></div>

			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart1 = echarts.init(document.getElementById('chart2'),'uimaker');
				// 指定图表的配置项和数据
				option = {

					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['周一','周二','周三','周四','周五','周六','周日']
						}
					],

					grid:{
						x:60,
						x2:40,
						y:10,
						height:140
					},
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'成交',
							type:'line',
							smooth:true,
							itemStyle: {normal: {areaStyle: {type: 'default'}}},
							data:[10, 12, 21, 54, 260, 830, 710]
						},
						{
							name:'预购',
							type:'line',
							smooth:true,
							itemStyle: {normal: {areaStyle: {type: 'default'}}},
							data:[30, 182, 434, 791, 390, 30, 10]
						},
						{
							name:'意向',
							type:'line',
							smooth:true,
							itemStyle: {normal: {areaStyle: {type: 'default'}}},
							data:[1320, 1132, 601, 234, 120, 90, 20]
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option);
				window.addEventListener("resize",function(){
					myChart1.resize();
				});
			</script>

		</div>
	</li>

	<li>
		<div class="chartbox">
			<div class="boxtitle"><span>柱状图</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>
			<div id="chart3" class="charts"></div>

			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart2 = echarts.init(document.getElementById('chart3'),'uimaker');

				// 指定图表的配置项和数据

				option = {
					tooltip : {
						trigger: 'item',
						textStyle:{fontSize:14},
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},

					grid:{
						x:60,
						x2:40,
						y:10,
						height:140
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							data : ['1月','2月','3月','4月','5月','6月','7月']
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'直接访问',
							type:'bar',
							data:[320, 332, 301, 334, 390, 330, 320]
						},
						{
							name:'邮件营销',
							type:'bar',
							stack: '广告',
							data:[120, 132, 101, 134, 90, 230, 210]
						},
						{
							name:'联盟广告',
							type:'bar',
							stack: '广告',
							data:[220, 182, 191, 234, 290, 330, 310]
						},
						{
							name:'视频广告',
							type:'bar',
							stack: '广告',
							data:[150, 232, 201, 154, 190, 330, 410]
						},
						{
							name:'搜索引擎',
							type:'bar',
							data:[862, 1018, 964, 1026, 1679, 1600, 1570],
							markLine : {
								itemStyle:{
									normal:{
										lineStyle:{
											type: 'dashed'
										}
									}
								},
								data : [
									[{type : 'min'}, {type : 'max'}]
								]
							}
						},
						{
							name:'百度',
							type:'bar',
							barWidth : 5,
							stack: '搜索引擎',
							data:[620, 732, 701, 734, 1090, 1130, 1120]
						},
						{
							name:'谷歌',
							type:'bar',
							stack: '搜索引擎',
							data:[120, 132, 101, 134, 290, 230, 220]
						},
						{
							name:'必应',
							type:'bar',
							stack: '搜索引擎',
							data:[60, 72, 71, 74, 190, 130, 110]
						},
						{
							name:'其他',
							type:'bar',
							stack: '搜索引擎',
							data:[62, 82, 91, 84, 109, 110, 120]
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart2.setOption(option);
				window.addEventListener("resize",function(){
					myChart2.resize();
				});
			</script>

		</div>
	</li>
</ul>

<div class="infolist">

	<div class="infoleft">
		<div class="infoboxleft">
			<div class="boxtitle"><span>最新订单</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>

			<div class="boxdown">
				<table class="simpletable">

					<thead>
					<th>订单编号</th>
					<th>订单金额(元)</th>
					<th>下单时间</th>
					<th>交易完成日期</th>
					<th>卖家ID</th>
					<th>操作</th>
					</thead>

					<tbody>

					<tr>
						<td>20171101</td>
						<td>256</td>
						<td>2017-11-01 16:35:26</td>
						<td>2017-11-01</td>
						<td>uimaker</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171102</td>
						<td>300</td>
						<td>2017-11-02 10:50:08</td>
						<td>2017-11-02</td>
						<td>admin</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171103</td>
						<td>500</td>
						<td>2017-11-03 00:00:14</td>
						<td>2017-11-03</td>
						<td>nanjing</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171104</td>
						<td>1000</td>
						<td>2017-11-04 16:22:00</td>
						<td>2017-11-04</td>
						<td>office</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171105</td>
						<td>200</td>
						<td>2017-11-05 04:00:00</td>
						<td>2017-11-05</td>
						<td>uimaker</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171106</td>
						<td>150</td>
						<td>2017-11-06 18:20:10</td>
						<td>2017-11-06</td>
						<td>guanliyuan</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171107</td>
						<td>450</td>
						<td>2017-11-07 08:34:00</td>
						<td>2017-11-07</td>
						<td>moodoc</td>
						<td><a href="#" >查看</a></td>
					</tr>

					<tr>
						<td>20171108</td>
						<td>500</td>
						<td>2017-11-08 19:00:14</td>
						<td>2017-11-08</td>
						<td>iphonex</td>
						<td><a href="#" >查看</a></td>
					</tr>

					</tbody>

				</table>
			</div>

		</div>
	</div>

	<div class="inforight">
		<div class="infoboxright">
			<div class="boxtitle"><span>通知公告</span><a href="#">更多<i class="iconfont icon-gengduo"></i></a></div>

			<ul class="textlist">
				<?php foreach($news as $v):?>
				<li><span></span><a href="#"><?php echo $v->title;?></a><i><?php echo substr($v->created_at, 0, 10);?></i></li>
				<?php endforeach;?>
			</ul>

		</div>
	</div>

</div>
